<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="query.supplierName" type="serch" clearable :placeholder="$t('table.supplierName')" style="width: 160px;" class="filter-item" @keyup.enter.native="search" />
      <el-select v-model="state" :placeholder="$t('table.status')" clearable class="filter-item" style="width: 130px;margin-left:10px;" @change="getdata">
        <el-option v-for="(item,index) in stateShenPi" :key="index" :label="item.txt" :value="item.val" />
      </el-select>
      <el-select v-model="buIds" multiple placeholder="BU" clearable class="filter-item" style="width: 130px;margin-left:10px;" @change="gettype">
        <el-option v-for="(item,index) in companyListData" :key="index" :label="item.comName" :value="item.id" />
      </el-select>
      <el-select v-model="categoryIds" multiple :placeholder="$t('table.bu')" placeholder="Category" clearable class="filter-item" style="width: 130px;margin-left:10px;" @change="gettype1">
        <el-option v-for="(item,index) in CategoryItems" :key="index" :label="item.category" :value="item.id" />
      </el-select>
      <el-select
        v-model="query.owner"
        clearable
        filterable
        placeholder="owenr"
        class="filter-item"
      >
        <el-option
          v-for="user in users1"
          :key="user.userId"
          :label="user.userName"
          :value="user.userId"
        />
      </el-select>
      <el-select v-model="query.addressType" clearable style="margin-left:10px;" :placeholder="$t('table.supplierLocation')" class="filter-item" filterable>
        <el-option v-for="item in addressTypeList" :key="item.val" :label="item.txt" :value="item.val" />
      </el-select>
      <el-button style="margin-left:10px;" class="filter-item" type="primary" icon="el-icon-search" @click="search">{{ $t('table.search') }}</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleAdd">{{ $t('table.add') }}</el-button>
      <el-button v-loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-document" @click="supplierExpExcelFun">
        {{ $t('table.Exportexcel') }}
      </el-button>
    </div>
    <el-table v-loading="loading" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" highlight-current-row border @cell-click="cellClick">
      <el-table-column prop="supplierCode" :label="$t('table.supplierCode')" />
      <el-table-column prop="supplierCodeErp" :label="$t('table.erpSupplierCode')" width="130" />
      <el-table-column prop="supplierName" :label="$t('table.supplierName')">
        <template slot-scope="{row,$index}">
          <div style="width:100%" @click="handleUpdate(row, $index)">{{ row.supplierName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="contact" :label="$t('table.contactPerson')" />
      <el-table-column prop="mobilePhone" :label="$t('table.contactInformation')" />
      <el-table-column prop="email" label="email" :formatter="getemail" />
      <el-table-column prop="ownerName" label="owner">
        <!--<template slot-scope="{ row, $index }">{{
            getowner(row.owner) }}
          </template>-->
      </el-table-column>
      <el-table-column prop="address" :label="$t('table.addresses')" />
      <el-table-column label="状态" align="center" :label="$t('table.status')">
        <template slot-scope="{ row, $index }">
          <span v-if="row.state==-1">淘汰</span>
          <span v-if="row.state==1" style="color:orange">潜在</span>
          <span v-if="row.state==3">已登录</span>
          <span v-if="row.state==5">合格</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.approvalStatus')" align="center" width="150">
        <template slot-scope="{ row, $index }">

          <div v-if="row.checkStatus==1" style="color:#00e600">新供应商审核中</div>
          <div v-if="row.checkStatus==0" />
          <div v-if="row.checkStatus==2" style="color:#00e600">认证信息修改审核中</div>

          <div v-if="row.checkStatus==3" style="color:#00e600">PPAP审核中</div>
          <div v-if="row.readyThrow==1" style="color:red">淘汰审批中</div>
        </template>
      </el-table-column>
      <el-table-column prop="addressType" :label="$t('table.supplierLocation')">
        <template slot-scope="{ row, $index }">
          <span v-if="row.addressType==1">天津</span>
          <span v-if="row.addressType==2">苏州</span>
          <span v-if="row.addressType==3">国内其他</span>
          <span v-if="row.addressType==4">国外</span>
        </template>
      </el-table-column>
      <el-table-column prop="nouseReason" :label="$t('table.reasonforelimination')">
        <template slot-scope="{ row, $index }">

          <span v-if="row.state==-1">{{ row.nouseReason }}</span>

        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" align="center" min-width="130">
        <template slot-scope="{row,$index}">

          <el-button v-if="row.state!==-1" type="primary" size="mini" @click="disablefun(row,-1)">{{ $t('table.MakeUnavailable') }}</el-button>
          <el-button v-if="row.state==-1" type="primary" size="mini" @click="change(row,1)">{{ $t('table.Enable') }}</el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">{{ $t('table.edit') }}</el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="query.pageIndex" :limit.sync="query.pageSize" @pagination="getInfo" />

    <el-dialog title="编辑淘汰原因" :visible.sync="reasonVisible" width="30%" :before-close="handleClose" :close-on-click-modal="false">

      <el-form ref="ruleFormReason" :model="rulesReasonData" label-width="100px" label-position="left" :rules="rulesReason">
        <el-form-item label="淘汰原因" prop="nouseReason">
          <el-input v-model="rulesReasonData.nouseReason" placeholder="淘汰原因" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reasonVisible = false">取 消</el-button>
        <el-button type="primary" @click="change2(-1)">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="showNouseReason" width="35%" title="供应商履历" :close-on-click-modal="false">
      <el-table :data="reasonList" style="width: 100%;margin-bottom: 20px;" row-key="id" highlight-current-row border>
        <el-table-column prop="note" label="淘汰原因" sortable />

        <el-table-column label="添加时间">
          <template slot-scope="{ row }">
            <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" width="75%" height="400px" :title="dialogType==='edit'?'编辑':'新增'">

      <el-form ref="ruleForm" :model="supplier" label-width="200px" label-position="left" :rules="rules">
        <div>

          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane :label="$t('scmTitle.basicinformation')" name="first">
              <el-row>
                <el-col :span="12">
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.basicinformationofsuppliers')">
                    <div style="display:flex;flex-wrap:wrap;">

                      <el-button class="filter-item" type="warning" icon="el-icon-download" @click="downloadExcel('供应商基本信息表Copper Joint )(1).xlsx','suplierInfor.xlsx')">
                        {{ $t('scmTitle.supplierBasicInformationTemplate') }}
                      </el-button>
                    </div>
                  </el-form-item>
                  <el-form-item :label="$t('table.supplierName')" prop="supplierName">
                    <el-input v-model.trim="supplier.supplierName" :placeholder="$t('table.supplierName')" maxlength="50" />
                  </el-form-item>
                  <el-form-item :label="$t('table.supplierCode')" prop="supplierCode">
                    <el-input v-model.trim="supplier.supplierCode" :placeholder="$t('table.supplierCode')" maxlength="50" />
                  </el-form-item>
                  <el-form-item :label="$t('table.status')" prop="state">
                    <el-select v-model="supplier.state+''" style="font-weight:bold;color:red" placeholder="状态" clearable class="filter-item" disabled>
                      <el-option v-for="(item,index) in stateShenPi" :key="index" :label="item.txt" :value="item.val" />
                    </el-select>
                  </el-form-item>
                  <el-form-item :label="$t('table.erpSupplierCode')" prop="supplierCodeErp">
                    <el-input v-model.trim="supplier.supplierCodeErp" :placeholder="$t('table.erpSupplierCode')" maxlength="50" />
                  </el-form-item>
                  <el-form-item label="email" prop="email">
                    <el-input v-model.trim="supplier.email" placeholder="email" maxlength="60" />
                  </el-form-item>
                  <el-form-item label="抄送email" prop="chaoemail">
                    <el-input v-model.trim="supplier.chaoemail" placeholder="抄送email" maxlength="60" />
                  </el-form-item>
                  <el-form-item :label="$t('table.addresses')" prop="address">
                    <el-input v-model.trim="supplier.address" :placeholder="$t('table.addresses')" maxlength="50" />
                  </el-form-item>
                  <el-form-item :label="$t('permission.dateofEstablishment')">
                    <el-date-picker
                      v-model="formDate11"
                      value-format="timestamp"
                      :placeholder="$t('permission.dateofEstablishment')"
                      @change="cc"
                    />
                  </el-form-item>

                  <el-form-item :label="$t('table.supplierLocation')" prop="addressType">
                    <el-select v-model="supplier.addressType" clearable style="margin-right:10px;" :placeholder="$t('table.supplierLocation')" class="filter-item" filterable>
                      <el-option v-for="item in addressTypeList" :key="item.val" :label="item.txt" :value="item.val" />
                    </el-select>
                  </el-form-item>
                  <!--<el-form-item label="省/市" prop="addressType">
                  <el-cascader :options="areaSelectData" :disabled="isNotEdit"
                    @change="handleChange" class="full-width" size="large"
                    v-model="selectedOptions" placeholder="请选择您所在的城市" />
                </el-form-item>-->

                  <el-form-item :label="$t('scmTitle.suppliertype')" prop="type">
                    <el-select v-model="supplier.type" clearable style="margin-right:10px;" :placeholder="$t('scmTitle.suppliertype')" class="filter-item" filterable>
                      <el-option v-for="item in suplierType" :key="item.val" :label="item.txt" :value="item.val" />
                    </el-select>
                  </el-form-item>

                  <el-form-item v-if="dialogType==='edit'" label="PPAP">
                    <div style="display:flex;flex-wrap:wrap;align-items:center;">
                      <el-upload v-if="supplier.state==3||supplier.state==4||supplier.state==5" ref="impfile" :on-change="fileChange" class="filter-item" action="" :before-upload="beforeUpload" :limit="1" multiple :on-exceed="handleExceed" :http-request="((e)=>{impfile(e)})">
                        <el-button v-loading.fullscreen.lock="fullscreenLoadingPPAP" icon="el-icon-upload" type="primary" class="filter-item" style="margin-top: 10px;">{{ $t('permission.uploadOrderPPAP') }}</el-button>
                      </el-upload>
                      <span class="downfile" @click="downloadfile()">{{ ppapFile }}</span>
                    </div>
                  </el-form-item>

                </el-col>
                <el-col :span="12">
                  <el-form-item label="BU" style="margin-left:20px;" prop="companyId">
                    <el-checkbox-group v-model="checked">
                      <el-checkbox v-for="(way,index) in companyListData" :key="index" name="companyId" :label="way.id+''">{{ way.comName }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item :label="$t('table.contactPerson')" prop="contact" style="margin-left:20px;">
                    <el-input v-model.trim="supplier.contact" :placeholder="$t('table.contactPerson')" maxlength="50" />
                  </el-form-item>
                  <el-form-item :label="$t('table.contactInformation')" prop="mobilePhone" style="margin-left:20px;">
                    <el-input v-model.trim="supplier.mobilePhone" :placeholder="$t('table.contactInformation')" maxlength="50" />
                  </el-form-item>

                  <el-form-item label="owner" prop="owner" style="margin-left:20px;">
                    <el-select
                      v-model="supplier.owner"
                      clearable
                      filterable
                      placeholder="owenr"
                      class="filter-item"
                    >
                      <el-option
                        v-for="user in users"
                        :key="user.userId"
                        :label="user.userName"
                        :value="user.userId"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="Category" style="margin-left:20px;" prop="Category">
                    <el-select v-model="categoryForm.category" clearable placeholder="请选择Category" class="filter-item" filterable @change="choosecategory">
                      <el-option v-for="(item,index) in CategoryItems" :key="index" :label="item.category" :value="item.id" />
                    </el-select>

                    <el-button type="primary" class="filter-item" style="margin-top: 10px;" @click="AddCategory()">{{ $t('permission.AddCategory') }}</el-button>

                    <el-table v-loading="categoryListLoading" :data="categoryList" border style="width: 100%;margin-top:5px;">
                      <el-table-column prop="category" label="category" width="180" />
                      <el-table-column prop="ownerName" label="owner" />

                      <el-table-column prop="createTime" min-width="160" sortable>
                        <template slot-scope="{ row }">
                          <el-button type="danger" size="mini" @click="delCategory(row)">{{ $t('table.delete') }}</el-button>
                        </template>
                      </el-table-column>
                    </el-table>

                  </el-form-item>

                  <el-form-item :label="$t('table.estimatedspend')" style="margin-left:20px;" :prop="dialogType==='new'?'estimateSpend':''">
                    <el-input v-model.trim="supplier.estimateSpend" placeholder="预估spend" oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value" maxlength="8" @keyup.native="number()">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">万元</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item :label="$t('scmTitle.supplierIntroduction')" style="margin-left:20px;">
                    <div style="display:flex;flex-wrap:wrap;align-items:center;">
                      <el-upload ref="impfileProduce" :on-change="fileChange" class="filter-item" action="" :before-upload="beforeUploadfile" :limit="1" multiple :on-exceed="handleExceed" :http-request="((e)=>{impfileInfo(e,11)})">
                        <el-button v-loading.fullscreen.lock="fullscreenLoading" icon="el-icon-upload" type="primary" class="filter-item" style="margin-top: 10px;">{{ $t('permission.uploadSupplierProfile') }}</el-button>
                      </el-upload>
                      <span class="downfile" @click="downloadfileOnSupplierFun(11)">{{ fileSupplider1 }}</span>
                    </div>
                  </el-form-item>
                  <el-form-item :label="$t('scmTitle.supplierauditreport')" style="margin-left:20px;">
                    <div style="display:flex;flex-wrap:wrap;align-items:center;">
                      <el-upload ref="impfileReport" :on-change="fileChange" class="filter-item" action="" :before-upload="beforeUploadfile" :limit="1" multiple :on-exceed="handleExceed" :http-request="((e)=>{impfileInfo(e,12)})">
                        <el-button v-loading.fullscreen.lock="fullscreenLoading1" icon="el-icon-upload" type="primary" class="filter-item" style="margin-top: 10px;">{{ $t('permission.uploadSupplierTestReport') }}</el-button>
                      </el-upload>
                      <span class="downfile" @click="downloadfileOnSupplierFun(12)">{{ fileSupplider2 }}</span>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <div style="text-align:center;">
                <el-button type="danger" @click="dialogVisible=false">{{ $t('permission.close') }}</el-button>
                <el-button type="primary" @click="confirm">{{ $t('permission.confirm') }}</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane v-if="dialogType==='edit'" :label="$t('scmTitle.certificationInformation')" name="second">
              <el-row>
                <el-col :span="12">

                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.productServiceIndustries')" prop="serviceIndustry">
                    <el-input v-model="supplier.serviceIndustry" maxlength="300" disabled :placeholder="$t('scmTitle.productServiceIndustries')" type="textarea" :rows="5" />
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.productRange')" prop="productRange">
                    <el-input v-model="supplier.productRange" maxlength="300" disabled :placeholder="$t('scmTitle.productRange')" type="textarea" :rows="5" />
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.mainProcesses')" prop="mainProcess">
                    <el-input v-model="supplier.mainProcess" maxlength="300" disabled :placeholder="$t('scmTitle.mainProcesses')" type="textarea" :rows="5" />
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.salesoftwoyearsago')" prop="beforLastYearSales">
                    <el-input v-model.trim="supplier.beforLastYearSales" disabled oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 2):value" :placeholder="$t('scmTitle.salesoftwoyearsago')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.millionyuan') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.salesofLastyear')" prop="lastYearSales">
                    <el-input v-model.trim="supplier.lastYearSales" disabled oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 2):value" :placeholder="$t('scmTitle.salesofLastyear')" @change="getval">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.millionyuan') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.expectedsalesthisyear')" prop="thisYearSales">
                    <el-input v-model.trim="supplier.thisYearSales" disabled oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 2):value" :placeholder="$t('scmTitle.expectedsalesthisyear')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.millionyuan') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.percentageofallbusiness')" prop="proportion">
                    <el-input v-model="supplier.proportion" disabled :placeholder="$t('scmTitle.percentageofallbusiness')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">%</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.percentageofdomesticsalesmarket')" prop="chinaProportion">
                    <el-input v-model="supplier.chinaProportion" disabled :placeholder="$t('scmTitle.percentageofdomesticsalesmarket')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">%</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.percentageofforeignsalesmarket')" prop="foreignProportion">
                    <el-input v-model="supplier.foreignProportion" disabled :placeholder="$t('scmTitle.percentageofforeignsalesmarket')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">%</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.maincustomerone')" prop="top1">
                    <el-input v-model="supplier.top1" disabled :placeholder="$t('scmTitle.maincustomerone')" />
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.purchaseamountfrommajorcustomerone')" prop="top1Buys">
                    <el-input v-model.trim="supplier.top1Buys" disabled oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 2):value" :placeholder="$t('scmTitle.purchaseamountfrommajorcustomerone')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.millionyuan') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.maincustomertwo')" prop="top2">
                    <el-input v-model="supplier.top2" disabled :placeholder="$t('scmTitle.maincustomertwo')" />
                  </el-form-item>

                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.purchaseamountfrommajorcustomertwo')" prop="top2Buys">
                    <el-input v-model.trim="supplier.top2Buys" disabled oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 2):value" :placeholder="$t('scmTitle.purchaseamountfrommajorcustomertwo')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.millionyuan') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.maincustomerthree')" prop="top3">
                    <el-input v-model="supplier.top3" disabled :placeholder="$t('scmTitle.maincustomerthree')" />
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.purchaseamountfrommajorcustomerthree')" prop="top3Buys">
                    <el-input v-model.trim="supplier.top3Buys" disabled oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 2):value" :placeholder="$t('scmTitle.purchaseamountfrommajorcustomerthree')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.millionyuan') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.whethertherearecopperprocessing')" prop="hasSimilar">
                    <el-select v-model="supplier.hasSimilar" disabled clearable style="margin-right:10px;" :placeholder="$t('scmTitle.whethertherearecopperprocessing')" class="filter-item" filterable>
                      <el-option v-for="item in ishave" :key="item.val" :label="item.text" :value="item.val" />
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.totalnumberofpeople')" prop="employeeTotalNumber">
                    <el-input v-model.trim="supplier.employeeTotalNumber" disabled :placeholder="$t('scmTitle.totalnumberofpeople')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.people') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.whetherthereisanEIAcertificate')" prop="envAssessmentCertificate">
                    <el-select v-model="supplier.envAssessmentCertificate" disabled clearable :placeholder="$t('scmTitle.whetherthereisanEIAcertificate')" class="filter-item" filterable>
                      <el-option v-for="item in ishaveZheng" :key="item.val" :label="item.text" :value="item.val" />
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit' && supplier.envAssessmentCertificate==1" :label="$t('scmTitle.certificatedocument')">
                    <div style="display:flex;flex-wrap:wrap;">

                      <span v-if="file7.fileName" class="downfile" @click="handleShowProjectFile1(7)">{{ file7.fileName }}</span>
                      <span v-else>{{ $t('scmTitle.nothing') }}</span>

                    </div>
                  </el-form-item>

                </el-col>
                <el-col :span="12">
                  <!--<el-form-item label="采购协议" v-if="dialogType==='edit'" style="margin-left:20px;">
                  <span v-if="supplier.buyContract==1" style="font-bold:bold">Y</span>
                  <span v-else style="font-bold:bold;color:red;text-align:center;">N</span>
                </el-form-item>
                <el-form-item label="质量协议" v-if="dialogType==='edit'" style="margin-left:20px;">
                  <span v-if="supplier.qualityContract==1" style="font-bold:bold;text-align:center;">Y</span>
                  <span v-else style="font-bold:bold;color:red;text-align:center;">N</span>
                </el-form-item>
                <el-form-item label="保密协议" v-if="dialogType==='edit'" style="margin-left:20px;">
                  <span v-if="supplier.secretContract==1" style="font-bold:bold;text-align:center;">Y</span>
                  <span v-else style="font-bold:bold;color:red;text-align:center;">N</span>
                </el-form-item>-->

                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.companyType')" prop="supplierType" style="margin-left:20px;">
                    <el-select v-model="supplier.supplierType" disabled clearable style="margin-right:10px;" :placeholder="$t('scmTitle.companyType')" class="filter-item" filterable>
                      <el-option v-for="item in typeList" :key="item.val" :label="item.text" :value="item.val" />
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.companyType')" style="margin-left:20px;" prop="supplierNature">
                    <el-input v-model="supplier.supplierNature" disabled :placeholder="$t('scmTitle.companyType')" />
                  </el-form-item>

                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.numberofqualitypersonnel')" prop="employeeQualityNumber">
                    <el-input v-model.trim="supplier.employeeQualityNumber" disabled :placeholder="$t('scmTitle.numberofqualitypersonnel')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.people') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" :label="$t('scmTitle.numberoftechnicians')" style="margin-left:20px;" prop="employeeTechnologyNumber">
                    <el-input v-model.trim="supplier.employeeTechnologyNumber" disabled :placeholder="$t('scmTitle.numberoftechnicians')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.people') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.salespercapita')">
                    <el-input v-model="supplier.perCapitaSales" disabled type="text" disabled :placeholder="$t('scmTitle.salespercapita')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.millionyuan') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.totalfactorycapacity')" prop="totalCapacity">
                    <el-input v-model="supplier.totalCapacity" disabled :placeholder="$t('scmTitle.totalfactorycapacity')" />
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.percentageofcurrentremainingcapacity')" prop="lastCapacity">
                    <el-input v-model.trim="supplier.lastCapacity" disabled :placeholder="$t('scmTitle.percentageofcurrentremainingcapacity')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">%</i>
                    </el-input>
                  </el-form-item>

                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.productionequipmentlist')">
                    <div style="display:flex;flex-wrap:wrap;">
                      <span v-if="file1.fileName" class="downfile" @click="handleShowProjectFile1(1)">{{ file1.fileName }}</span>
                      <span v-else>{{ $t('scmTitle.nothing') }}</span>
                    </div>
                  </el-form-item>

                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.testingequipmentlist')">
                    <div style="display:flex;flex-wrap:wrap;">
                      <span v-if="file2.fileName" class="downfile" @click="handleShowProjectFile1(2)">{{ file2.fileName }}</span>
                      <span v-else>{{ $t('scmTitle.nothing') }}</span>
                    </div>
                  </el-form-item>

                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.factorysitephoto')">
                    <div style="display:flex;flex-wrap:wrap;">
                      <span v-if="file3.fileName" class="downfile" @click="handleShowProjectFile1(3)">{{ file3.fileName }}</span>
                      <span v-else>{{ $t('scmTitle.nothing') }}</span>
                    </div>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.standardProductDeliveryCycle')" prop="deliveryDays">
                    <el-input v-model="supplier.deliveryDays" disabled :placeholder="$t('scmTitle.standardProductDeliveryCycle')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.day') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.paymentperiod')" prop="payDays">
                    <el-input v-model="supplier.payDays" disabled :placeholder="$t('scmTitle.paymentperiod')">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{ $t('scmTitle.day') }}</i>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.whetherthestockcanbeprepared')" prop="keepStock">
                    <el-select v-model="supplier.keepStock" disabled clearable :placeholder="$t('scmTitle.whetherthestockcanbeprepared')" class="filter-item" filterable>
                      <el-option v-for="item in iscan" :key="item.val" :label="item.text" :value="item.val" />
                    </el-select>

                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.EffectivedateofISO')">
                    <el-date-picker v-model="endTime4" disabled type="date" :placeholder="$t('scmTitle.effectivedate')" />

                  </el-form-item>

                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.iso')">
                    <div style="display:flex;flex-wrap:wrap;">

                      <span v-if="file4.fileName" class="downfile" @click="handleShowProjectFile1(4)">{{ file4.fileName }}</span>
                      <span v-else>{{ $t('scmTitle.nothing') }}</span>
                    </div>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.environmentalandoccupationalhealthandsafetysystemdate')">
                    <el-date-picker v-model="endTime5" disabled type="date" :placeholder="$t('scmTitle.effectivedate')" />
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.environmentalandoccupationalhealthandsafetysystem')">
                    <div style="display:flex;flex-wrap:wrap;">

                      <span v-if="file5.fileName" class="downfile" @click="handleShowProjectFile1(5)">{{ file5.fileName }}</span>
                      <span v-else>{{ $t('scmTitle.nothing') }}</span>
                    </div>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.effectivedateofothercertifications')">
                    <el-date-picker v-model="endTime6" disabled type="date" :placeholder="$t('scmTitle.effectivedateofothercertifications')" />
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.othercertificates')">
                    <div style="display:flex;flex-wrap:wrap;">

                      <!--<el-button      icon="el-icon-download" type="primary" class="filter-item"  >下载其他认证</el-button>-->

                      <span v-if="file6.fileName" class="downfile" @click="handleShowProjectFile1(6)">{{ file6.fileName }}</span>
                      <span v-else>{{ $t('scmTitle.nothing') }}</span>
                    </div>
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'&&supplier.envAssessmentCertificate" style="margin-left:20px;" label="是否有环评证有效日期">
                    <el-date-picker v-model="endTime7" disabled type="date" :placeholder="$t('scmTitle.effectivedate')" />
                  </el-form-item>
                  <el-form-item v-if="dialogType==='edit'" style="margin-left:20px;" :label="$t('scmTitle.highriskEIAcontrolledprocesses')" prop="highRiskProcess">
                    <el-input v-model="supplier.highRiskProcess" disabled :placeholder="$t('scmTitle.highriskEIAcontrolledprocesses')" type="textarea" :rows="3" />
                  </el-form-item>

                </el-col>
              </el-row>
              <div style="text-align:center;">
                <el-button type="danger" @click="dialogVisible=false">{{ $t('permission.close') }}</el-button>
              <!--<el-button type="primary" @click="confirm">{{ $t('permission.confirm') }}</el-button>-->
              </div>
            </el-tab-pane>
            <el-tab-pane v-if="dialogType==='edit'&&supplier.state!==1&&supplier.state!==-1" label="协议" name="third">

              <el-button type="text" @click="checkxieyi">查看协议</el-button>
              <div style="text-align:center;margin-top:10px">

                <el-button type="danger" @click="dialogVisible=false">{{ $t('permission.close') }}</el-button>

              </div>
            </el-tab-pane>
            <el-tab-pane v-if="dialogType==='edit'" label="审批记录" name="four">
              <el-form label-width="200px" label-position="left">
                <el-form-item label="新供应商审批进度">
                  <newsupplier ref="newSuplier" />
                </el-form-item>
                <el-form-item label="认证信息修改审批进度">
                  <oldSuplier ref="oldSuplier" />
                </el-form-item>

                <!--<el-form-item label="淘汰审批记录">
                  <el-table :data="tableData5" style="width: 100% margin-top: 10px" row-key="id" highlight-current-row border>
                    <el-table-column prop="realName" label="审批人" align='center'>

                    </el-table-column>
                    <el-table-column align="center" prop="name" label="审批时间" > </el-table-column>
                    <el-table-column prop="iorder" align='center' label="审批结果" sortable>

                    </el-table-column>
                  </el-table>
                </el-form-item>
                 <el-form-item label="合格供应商准入审批记录">
                  <el-table :data="tableData2" style="width: 100% margin-top: 10px" row-key="id" highlight-current-row border>
                    <el-table-column prop="realName" label="审批人" align='center'>

                    </el-table-column>
                    <el-table-column align="center" prop="name" label="审批时间" > </el-table-column>
                    <el-table-column prop="iorder" align='center' label="审批结果" sortable>

                    </el-table-column>
                  </el-table>
                </el-form-item>-->
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form>

    </el-dialog>
  </div>
</template>
<script>
// import {provinceAndCityData, CodeToText, TextToCode} from 'element-china-area-data';
import { getNormalSupplier, downloadfileOnSupplier, upCategory,
  delSupplierCategory, addSupplierCategory, getSupplierCategory,
  getfileOnSupplier, supplierExpExcel, uploadSupplierInfor,
  getInfo, add, update, deleteInfo, supplierChange, download,
  getfile, impPpap, downLoadfile, getdetail, supplierChangeList,
  companyList, groupOwner } from '@/api/supplier'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { deepClone, arraryRemove, parseTime1, downfile, downLoadTemplate } from '../../../utils'
import { getList as getUserList } from '@/api/user'
import newsupplier from '@/views/basic/supplier/newsupplier'
import oldSuplier from '@/views/basic/supplier/oldsupplier'

const supplier = {
  id: 0,
  supplierCode: '',
  supplierName: '',
  address: '',
  contact: '',
  mobilePhone: '',
  email: '',
  type: '',
  estimateSpend: '',
  companyId: '',
  chaoemail: '',
  establishmentTime: ''
}
const rulesReasonData = {
  nouseReason: ''
}
const categoryForm = {
  category: '',
  categoryId: ''
}
const checktop1 = (rule, value, callback, type) => {
  if (value && value.length > rule.maxlength) {
    return callback(new Error('字符长度不超过' + rule.maxlength + '个字符'))
  } else {
    callback()
  }
}
const checktop2 = (rule, value, callback, type) => {
  // console.log(rule)
  if (value && value.length < 8 || value && value.length > 20) {
    return callback(new Error('手机号长度在8到20之间'))
  } else {
    callback()
  }
}
export default {
  name: 'Supplier',
  components: { Pagination, newsupplier, oldSuplier },
  directives: { waves },
  filters: {
    formatStatus(value, NormalSupplierData) {
      // console.log(value,status)
      for (var i = 0; i < NormalSupplierData.length; i++) {
        // console.log(999)
        if (NormalSupplierData[i].type == value && NormalSupplierData[i].status == 1 || NormalSupplierData[i].type == value && NormalSupplierData[i].status == 2) {
          return 'Y'
        }
      }
      return 'N'
    }
  },
  data() {
    return {
      //       areaSelectData: provinceAndCityData, // options绑定的数据就是引入的 provinceAndCityData
      // selectedOptions: [], // 地区选择参数，['省区域码', '市区域码']
      sureState: [],
      xieyi: [],
      activeName: 'first',
      categoryIds: '',
      buIds: '',
      fullscreenLoadingPPAP: false,
      fullscreenLoading: false,
      fullscreenLoading1: false,
      formDate11: '',
      fileSupplider2Data: {},
      fileSupplider1Data: {},
      categoryForm: Object.assign({}, categoryForm),
      categoryList: [],
      loading: true,
      checked: [],
      suplierType: [
        {
          val: 1,
          txt: '直接物料供应商'
        },
        {
          val: 2,
          txt: '间接物料供应商'
        }, {
          val: 3,
          txt: '外协供应商'
        }],
      downloadLoading: false,
      rulesReason: {
        nouseReason: [
          { required: true, message: '请填写淘汰原因', trigger: 'blur' },
          { validator: checktop1, trigger: 'change', maxlength: 15 }
        ]

      },
      reasonVisible: false,
      ppapFile: '',
      endTime4: '',
      endTime5: '',
      endTime6: '',
      endTime7: '',
      iscan: [{
        text: '是',
        val: 1

      },
      {
        text: '否',
        val: 2

      }],
      file1: {},
      file2: {},
      file3: {},
      file4: {},
      file5: {},
      file6: {},
      file7: {},
      ishave: [{
        text: '是',
        val: 1

      },
      {
        text: '否',
        val: 2

      }],
      ishaveZheng: [{
        text: '是',
        val: 1

      },
      {
        text: '否',
        val: 2

      }],
      typeList: [
        {
          text: '工厂',
          val: 1

        },
        {
          text: '代理',
          val: 2

        }

      ],
      addressTypeList: [
        {
          'txt': '天津',
          'val': 1
        }, {
          'txt': '苏州',
          'val': 2
        },
        {
          'txt': '国内其他',
          'val': 3
        }, {
          'txt': '国外',
          'val': 4
        }],
      stateShenPi: [
        {
          'txt': '淘汰',
          'val': '-1'
        },
        {
          'txt': '潜在',
          'val': '1'
        }, {
          'txt': '已登录',
          'val': '3'
        }, {
          'txt': '合格',
          'val': '5'
        }],
      tablePerson: [],
      tablelog: [],
      tablefile: [],
      rules: {
        addressType: [
          { required: true, message: '请选择供应商所在地', trigger: 'blur' }
        ],

        companyId: [
          { required: true, message: '请选择BU', trigger: 'blur' }
        ],
        supplierCode: [
          { required: true, message: '请填写供应商代码', trigger: 'blur' }
        ],
        estimateSpend: [
          { required: true, message: '请填写预估Spend', trigger: 'blur' }

        ],
        supplierName: [
          { required: true, message: '请填写供应商名称', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请填写联系人', trigger: 'blur' }
        ],
        mobilePhone: [
          { required: true, message: '请填写联系方式', trigger: 'blur' },
          { validator: checktop2, trigger: 'change', maxlength: 20, min: 8 }
          // { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的手机号码格式' }
        ],
        email: [
          { required: true, message: '请填写email', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '请输入正确的邮箱格式' }

        ],
        chaoemail: [
          // { required: true, message: '请填写email', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '请输入正确的邮箱格式' }

        ],
        address: [
          { required: true, message: '请填写地址', trigger: 'blur' }
        ],
        owner: [
          { required: true, message: '请选择owner', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      dialogDetail: false,
      dialogType: 'new',
      total: 0,
      rulesReasonData: Object.assign({}, rulesReasonData),
      supplier: Object.assign({}, supplier),
      query: {
        buIds: '',
        states: '',
        pageIndex: 1,
        pageSize: 20,
        supplierName: ''
      },
      currentPage: 1,
      pagesize: 10,
      tableData: [],
      state: '',
      filename: '供应商信息.xls',
      showNouseReason: false,
      reasonList: [],
      companyListData: [],
      fileSupplider2: '',
      fileSupplider1: '',
      CategoryItems: [],
      categoryListLoading: false,
      NormalSupplierData: [],
      users: [],
      users1: []
      //        whatcheck: 1,
      //       txtName: "",
      //       tablelog: [],
      //       showpan: false,
      //       shenpiId: '',
      //       tableData2:[],
      // tableData3:[],
      // tableDatashen:[]
    }
  },
  created() {

  },
  mounted() {
    this.getInfo()
    this.CategoryFun()
    this.getcompanyList()
    this.getUserList()
  },
  methods: {
    checkxieyi() {
      this.dialogVisible = false
      this.$router.push({
        path: '/project/contractManagement',
        query: { supplierId: this.supplier.id }
      })
      //  this.$router.push({ path: row.path })
    },
    getUserList() {
      const obj = {
        groupType: 2,
        groupName: '供应商owner组'
      }
      groupOwner(obj).then((res) => {
        //  console.log('user',res);
        this.users = res.data[0].members
        this.users1 = deepClone(this.users)

        this.users1.unshift({

          'userId': 0,
          'userName': '未填写'

        })
      })
    },
    formatStatusFun(value, status) {
      // console.log(value)
      for (var i = 0; i < this.NormalSupplierData.length; i++) {
        // console.log(888,value,this.sureState[i])
        if (this.NormalSupplierData[i].type == value && this.NormalSupplierData[i].status == 1 || this.NormalSupplierData[i].type == value && this.NormalSupplierData[i].status == 2) {
          //  console.log('000',value)
          return true
        }
      }
      return false
    },
    getNormalSupplierFun() {
      this.NormalSupplierData = []
      this.sureState = []
      this.fullscreenLoading1 = true
      getNormalSupplier(this.supplier.id).then((res) => {
        this.fullscreenLoading1 = false
        this.NormalSupplierData = res.data
        this.sureState = [
          {
            value: 1,
            text: '采购框架协议'
          }, {
            value: 3,
            text: '供应商质量保证协议'
          },
          {
            value: 4,
            text: '供应商保密协议'
          },
          {
            value: 5,
            text: '铜盟电器供应商行为准则'
          },
          {
            value: 6,
            text: '诚信廉洁承诺书-铜盟'
          },
          {
            value: 7,
            text: 'REACH法规符合性声明'
          },
          {
            value: 8,
            text: '物料黑名单不使用声明'
          },
          {
            value: 9,
            text: 'Rohs符合性声明'
          },
          {
            value: 10,
            text: '不使用俄罗斯钢/铁材料的补充协议'
          }

        ]
      }).catch((err) => {
        this.fullscreenLoading1 = false
      })
    },
    gettype(e) {
      // console.log(e)
      // console.log(this.value)
      this.query.buIds = e.toString()
    },
    gettype1(e) {
      // console.log(e)
      // console.log(this.value)
      this.query.categoryIds = e.toString()
    },
    number() {
      this.supplier.estimateSpend = this.supplier.estimateSpend.replace(/[^\.\d]/g, '')
      this.supplier.estimateSpend = this.supplier.estimateSpend.replace('.', '')
    },

    getemail(row, column) {
      if (row.email && row.email.indexOf(',') !== -1) {
        const arr = row.email.split(',')
        return arr[0]
      } else {
        return row.email
      }
    },
    getowner(owner) {
      // console.log(owner)
      // console.log(this.users)
      if (owner) {
      // const itemName =  this.users.find((item)=>{

        //     item.userId===owner

        //   })
        for (var i = 0; i < this.users.length; i++) {
          if (this.users[i].userId == owner) {
            return this.users[i].userName
          }
        }
        // console.log(itemName)
      }
    },
    downloadExcel(nameOrigin, name) {
      downLoadTemplate(nameOrigin, name)
    },
    cc(e) {
      this.supplier.establishmentTime = e
      // console.log(this.supplier)
    },
    delCategory(row) {
      this.$confirm('是否确定删除？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.categoryListLoading = true
        delSupplierCategory(row.id).then((res) => {
          this.getSupplierCategoryFun()
        })
      }).catch(err => console.error(err))
    },
    choosecategory(e) {
      this.categoryForm.categoryId = e
    },
    getSupplierCategoryFun() {
      const obj = {
        supplierId: this.supplier.id

      }
      this.categoryListLoading = true
      getSupplierCategory(obj).then((res) => {
        this.categoryListLoading = false
        if (res.isSuccess) {
          this.categoryList = res.data
        } else {
          this.$message.error('添加失败')
        }
      }).catch(() => {
        this.categoryListLoading = false
      })
    },
    beforeUploadfile(file) {
      if (!this.supplier.id) {
        this.$message.warning('请先保存必填项再上传文件')
        return false
      }
      const size10M = file.size / 1024 / 1024 <= 5
      if (!size10M) {
        this.$message.warning('上传文件大小不能超过 5MB!')
        return false
      }
      'TXT', 'DOC', 'DOCX', 'XLS', 'XLSX', 'PDF', 'JPG', 'ZIP', 'RAR', '7Z'
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      // console.log(testmsg)
      const extension = ['txt', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'jpg', 'ZIP', 'RAR', '7Z']
      if (extension.indexOf(testmsg) == -1) {
        this.$message({
          message: '上传文件只能是.TXT、.DOC、.DOCX、.XLS、.XLSX、.PDF、.JPG、.PNG、.JPEG,rar,zip,7z格式!',
          type: 'warning'
        })
        return false
      }
    },
    AddCategory() {
      if (!this.supplier.id) {
        this.$message.warning('请先保存必填项再添加CateGory')
        return false
      }
      if (!this.categoryForm.category) {
        this.$message.warning('请选择Category')
        return false
      }
      const obj = {
        supplierId: this.supplier.id,
        categoryId: this.categoryForm.categoryId
      }
      addSupplierCategory(obj).then((res) => {
        // this.CategoryItems = res.data
        if (res.isSuccess) {
          this.$message.success('添加成功')
          this.categoryForm = Object.assign({}, categoryForm)
          this.getSupplierCategoryFun()
        } else {
          this.$message.error('添加失败')
        }
      })
    },
    CategoryFun() {
      upCategory().then((res) => {
        this.CategoryItems = res.data
      })
    },
    addSupplierCategoryFun() {
      const obj = {
        supplierId: this.supplier.id,
        categoryId: ''
      }
      addSupplierCategory().then((res) => {

      })
    },
    supplierExpExcelFun() {
      this.downloadLoading = true
      const obj = deepClone(this.query)
      delete obj.pageIndex
      delete obj.pageSize
      supplierExpExcel(obj).then(res => {
        const content = res
        const blob = new Blob([content]) // 构造一个blob对象来处理数据
        const fileName = this.filename // 导出文件名
        if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
          const link = document.createElement('a') // 创建a标签
          link.download = fileName // a标签添加属性
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click() // 执行下载
          URL.revokeObjectURL(link.href) // 释放url
          document.body.removeChild(link) // 释放标签
        } else { // 其他浏览器
          navigator.msSaveBlob(blob, fileName)
        }
        setTimeOut(() => {
          this.downloadLoading = false
        })
      }).catch(() => {
        this.downloadLoading = false
      })
    },
    getCompanyId(e) {
      // console.log(e)
      this.supplier.companyId = e.toString()
    },
    getcompanyList() {
      companyList().then((res) => {
        this.companyListData = res.data
      })
    },
    cellClick(row, column, cell, event) {
      // console.log(row.index);
      if (column.property == 'nouseReason') {
        this.showNouseReason = true
        supplierChangeList(row.id).then((res) => {
          this.reasonList = res.data
        })
      }
    },

    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      // console.log(this.currentPage)
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '供应商代码', '供应商名称', '联系人', '联系方式', 'email', '地址',
          '状态', '淘汰原因', '产品服务行业', '产品范围', '主要工艺', '公司类型', '公司性质', '前年销售额(百万元)',
          '去年销售额(百万元)', '今年预计销售额(百万元)', '铜盟业务占贵公司业务百分比(%)', '国内销售市场占比(%)',
          '国外销售市场占比(%)', '主要客户1', '主要客户1采购额(百万元)', '主要客户2', '主要客户2采购额(百万元)', '主要客户3',
          '主要客户3采购额(百万元)', '客户中是否有铜加工或机柜组装厂商', '总人数(人)', '质量人数(人)',
          '技术人数(人)', '人均销售额(百万元)', '工厂总产能', '目前剩余产能百分比(%)', '标准产品供货周期(天)', '目前给铜盟的付款周期(天)', '能否为我司备库存', '是否有环评证', '有什么高风险的环评管制工艺（如喷涂,电镀等）'
        ]
        const filterVal = [
          'supplierCode', 'supplierName', 'contact', 'mobilePhone', 'email', 'address', 'state', 'nouseReason', 'serviceIndustry', 'productRange', 'mainProcess', 'supplierType', 'supplierNature', 'beforLastYearSales', 'lastYearSales', 'thisYearSales', 'proportion', 'chinaProportion', 'foreignProportion', 'top1', 'top1Buys', 'top2', 'top2Buys', 'top3', 'top3Buys', 'hasSimilar', 'employeeTotalNumber', 'employeeQualityNumber', 'employeeTechnologyNumber', 'perCapitaSales', 'totalCapacity', 'lastCapacity', 'deliveryDays', 'payDays', 'keepStock', 'envAssessmentCertificate', 'highRiskProcess'
        ]
        const tableData = this.tableData
        const data = this.formatJson(filterVal, tableData)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        // console.log(j)
        if (j === 'state') {
          return this.stateList(v)
        } else if (j === 'lastYearSales') {
          if (v.lastYearSales) {
            return v.lastYearSales / 100
          }
        } else if (j === 'thisYearSales') {
          if (v.thisYearSales) {
            return v.thisYearSales / 100
          }
        } else if (j === 'perCapitaSales') {
          if (v.perCapitaSales) {
            return v.perCapitaSales / 10000000
          }
        } else if (j === 'top3Buys') {
          if (v.top3Buys) {
            return v.top3Buys / 100
          }
        } else if (j === 'top2Buys') {
          if (v.top2Buys) {
            return v.top2Buys / 100
          }
        } else if (j === 'top1Buys') {
          if (v.top1Buys) {
            return v.top1Buys / 100
          }
        } else if (j === 'beforLastYearSales') {
          if (v.beforLastYearSales) {
            return v.beforLastYearSales / 100
          }
        } else if (j === 'envAssessmentCertificate') {
          if (v.lastYearSales) {
            return this.stateList4(v)
          }
        } else if (j === 'keepStock') {
          if (v.lastYearSales) {
            return this.stateList3(v)
          }
        } else if (j === 'supplierType') {
          if (v.lastYearSales) {
            return this.stateList2(v)
          }
        } else if (j === 'hasSimilar') {
          if (v.lastYearSales) {
            return this.stateList1(v)
          }
        } else {
          return v[j]
        }
      }))
    },
    stateList4(data) {
      if (data.envAssessmentCertificate == 1) {
        return '是'
      } else if (data.envAssessmentCertificate == 2) {
        return '否'
      }
    },
    stateList3(data) {
      if (data.keepStock == 1) {
        return '是'
      } else if (data.keepStock == 2) {
        return '否'
      }
    },
    stateList2(data) {
      if (data.supplierType == 1) {
        return '工厂'
      } else if (data.supplierType == 2) {
        return '代理'
      }
    },
    stateList1(data) {
      if (data.hasSimilar == 1) {
        return '是'
      } else if (data.supplyDown == 2) {
        return '否'
      }
    },
    stateList(data) {
      if (data.state == 2) {
        return '审批中'
      } else if (data.state == -1) {
        return '淘汰'
      } else if (data.state == 1) {
        return '潜在'
      } else if (data.state == 3) {
        return '已登陆'
      } else if (data.state == 4) {
        return 'PPAP审核中'
      } else if (data.state == 5) {
        return '合格'
      }
    },
    getdata(e) {
      this.query.states = e
    },
    deletefile() {
      const obj = {
        id: this.supplier.id
      }
      deletefile(obj).then((res) => {
        if (res.isSuccess) {
          this.getdetail()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    getdetail() {
      const obj = {
        id: this.supplier.id
      }
      getdetail(obj).then((res) => {
        this.ppapFile = res.data.items[0].fileName
      })
    },
    downloadfileOnSupplierFun(type) {
      let id = ''
      if (type == 11) {
        id = this.fileSupplider1Data.id
      } else if (type == 12) {
        id = this.fileSupplider2Data.id
      }
      download(id).then((res) => {
        if (type == 11) {
          downfile(this.fileSupplider1, res)
        } else if (type == 12) {
          downfile(this.fileSupplider2, res)
        }
      })
    },
    downloadfile() {
      downLoadfile(this.supplier.id).then((res) => {
        downfile(this.ppapFile, res)
      })
    },
    impfileInfo(item, type) {
      const fileObj = item.file
      const form = new FormData()
      form.append('file', fileObj)

      form.append('typeid', type)
      if (type == 11) {
        this.fullscreenLoading = true
      } else if (type == 12) {
        this.fullscreenLoading1 = true
      }
      uploadSupplierInfor(this.supplier.id, form).then((response) => {
        if (response.isSuccess) {
          if (type == 11) {
            this.fullscreenLoading = false
            this.$refs.impfileProduce.clearFiles()
          } else if (type == 12) {
            this.fullscreenLoading1 = false
            this.$refs.impfileReport.clearFiles()
          }
          this.getfileOnSupplierFun(type)
          this.$message.info('文件：' + fileObj.name + '上传成功')
          this.getInfo()
        } else {
          this.$message({
            type: 'error',
            message: response.message
          })
        }
      }).catch(() => {
        this.fullscreenLoading = false
        this.fullscreenLoading1 = false
      })
    },
    impfile(item) {
      const fileObj = item.file
      // FormData 对象
      const form = new FormData()
      // 文件对象
      //  const isLt100M = this.fileList.every(
      //   (file) => file.size / 1024 / 1024 < 100
      // );
      // this.fileList.forEach((item) => {
      form.append('file', fileObj)
      // });
      // form.append('filename', fileObj)
      // console.log(JSON.stringify(form))
      // let formTwo = JSON.stringify(form)
      this.fullscreenLoadingPPAP = true
      impPpap(this.supplier.id, form).then((response) => {
        this.fullscreenLoadingPPAP = false
        // console.log('MediaAPI.upload')
        // console.log(response)
        if (response.isSuccess) {
          this.$refs.impfile.clearFiles()
          this.getdetail()
          this.$message.info('文件：' + fileObj.name + '上传成功')
          this.getInfo()
        } else {
          this.$message({
            type: 'error',
            message: response.message
          })
        }
      }).catch(err => {
        this.fullscreenLoadingPPAP = false
      })
    },
    beforeUpload(file) {
      // this.formData.fileName = file.name

      const size10M = file.size / 1024 / 1024 <= 5
      if (!size10M) {
        this.$message.warning('上传文件大小不能超过 5MB!')
        return false
      }
      'TXT', 'DOC', 'DOCX', 'XLS', 'XLSX', 'PDF', 'JPG', 'ZIP', 'RAR', '7Z'
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      // console.log(testmsg)
      const extension = ['txt', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'jpg', 'ZIP', 'RAR', '7Z']
      if (extension.indexOf(testmsg) == -1) {
        this.$message({
          message: '上传文件只能是.TXT、.DOC、.DOCX、.XLS、.XLSX、.PDF、.JPG、.PNG、.JPEG,rar,zip,7z格式!',
          type: 'warning'
        })
        return false
      }
    },
    handleExceed(files, fileList) {
      // console.log(files, fileList);
      this.$message.warning(`一次只能上传一个文件`)
    },
    getfileOnSupplierFun(type) {
      const obj = {
        typeid: type
      }
      getfileOnSupplier(this.supplier.id, obj).then((res) => {
        const file = res.data[0]
        if (file) {
          if (type == 11) {
            this.fileSupplider1Data = res.data[0]
            this.fileSupplider1 = res.data[0].fileName
          } else if (type == 12) {
            this.fileSupplider2Data = res.data[0]
            this.fileSupplider2 = res.data[0].fileName
          }
        }
      })
    },
    getfiles(type) {
      const obj = {
        typeid: type
      }

      getfile(this.supplier.certificateId, obj).then((res) => {
        const file = res.data[0]
        if (file) {
          if (type == 1) {
            this.file1 = res.data[0]
          } else if (type == 2) {
            this.file2 = res.data[0]
          } else if (type == 3) {
            this.file3 = res.data[0]
          } else if (type == 4) {
            this.file4 = res.data[0]
            if (this.file4.endTime) {
              this.endTime4 = parseTime1(this.file4.endTime)
            }
          } else if (type == 5) {
            this.file5 = res.data[0]
            if (this.file5.endTime) {
              this.endTime5 = parseTime1(this.file5.endTime)
            }
          } else if (type == 6) {
            this.file6 = res.data[0]
            if (this.file6.endTime) {
              this.endTime6 = parseTime1(this.file6.endTime)
            }
          } else if (type == 7) {
            this.file7 = res.data[0]
            if (this.file7.endTime) {
              this.endTime7 = parseTime1(this.file7.endTime)
            }
          }
        }
      })
    },
    handleShowProjectFile1(type) {
      var row = {}
      if (type == 1) {
        row = this.file1
      } else if (type == 2) {
        row = this.file2
      } else if (type == 3) {
        row = this.file3
      } else if (type == 4) {
        row = this.file4
      } else if (type == 5) {
        row = this.file5
      } else if (type == 6) {
        row = this.file6
      } else if (type == 7) {
        row = this.file7
      }
      if (!row.id) {
        this.$message({
          type: 'warning',
          message: '此处还未上传文件'
        })
        return false
      }
      download(row.id).then(res => {
        const content = res
        const blob = new Blob([content]) // 构造一个blob对象来处理数据
        const fileName = row.fileName // 导出文件名
        if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
          const link = document.createElement('a') // 创建a标签
          link.download = fileName // a标签添加属性
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click() // 执行下载
          URL.revokeObjectURL(link.href) // 释放url
          document.body.removeChild(link) // 释放标签
        } else { // 其他浏览器
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    handleDetail() {
      this.dialogDetail = true
    },
    change2(type) {
      const obj = {
        state: type,
        id: this.supplier.id,
        nouseReason: this.rulesReasonData.nouseReason
      }
      this.$refs.ruleFormReason.validate((valid) => {
        if (valid) {
          supplierChange(obj).then(res => {
            if (res.isSuccess) {
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.reasonVisible = false

              this.getInfo()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          })
        }
      })
    },
    change(row, type) {
      const obj = {
        state: type,
        id: row.id
      }

      supplierChange(obj).then(res => {
        if (res.isSuccess) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })

          this.getInfo()
        } else {
          this.$message({
            type: 'warning',
            message: res.message
          })
        }
      })
    },
    disablefun(row, type) {
      const obj = {
        state: type,
        id: row.id
      }
      this.supplier = deepClone(row)
      this.reasonVisible = true
      this.rulesReasonData = Object.assign({}, rulesReasonData)
      // supplierChange(obj).then(res => {
      //      if(res.isSuccess){
      //     this.$message({
      //       type: 'success',
      //       message:'修改成功'
      //     })

      //      this.getInfo()

      //   }else{
      //      this.$message({
      //       type: 'warning',
      //       message: res.message
      //     })
      //   }
      // })
    },

    getInfo() {
      // console.log(this.state)
      this.loading = true
      getInfo(this.query).then(res => {
        this.tableData = res.data.items
        this.total = res.data.totalItems
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    search() {
      this.query.pageIndex = 1

      this.getInfo()
    },
    handleAdd() {
      this.supplier = Object.assign({}, supplier)
      this.formDate11 = ''
      this.dialogType = 'new'
      this.dialogVisible = true
      this.fileSupplider2Data = {}
      this.fileSupplider1Data = {}
      this.categoryForm = Object.assign({}, categoryForm),
      this.categoryList = []
      this.checked = []
      this.companyListData = []
      this.fileSupplider2 = ''
      this.fileSupplider1 = ''
      this.CategoryItems = []
      this.getcompanyList()
      this.CategoryFun()
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.clearValidate()
      }
      this.supplier.state = ''
      this.activeName = 'first'
    },
    handleUpdate(row) {
      this.dialogType = 'edit'
      this.checked = []
      this.dialogVisible = true
      const obj = deepClone(row)

      obj.chaoemail = ''
      if (obj.email && obj.email.indexOf(',') !== -1) {
        const arr = obj.email.split(',')
        obj.email = arr[0]
        obj.chaoemail = arr[1]
      } else {
        obj.chaoemail = ''
      }
      this.supplier = obj
      // console.log(this.supplier)
      this.file1 = {}
      this.file2 = {}
      this.file3 = {}
      this.file4 = {}
      this.file5 = {}
      this.file6 = {}
      this.file7 = {}
      this.endTime7 = ''
      this.endTime6 = ''
      this.endTime5 = ''
      this.endTime4 = ''
      this.ppapFile = ''
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.clearValidate()
      }

      if (row.fileName) {
        this.ppapFile = row.fileName
      }

      if (this.supplier.certificateId) {
        this.getfiles(1)
        this.getfiles(2)
        this.getfiles(3)
        this.getfiles(4)
        this.getfiles(5)
        this.getfiles(6)
        this.getfiles(7)

        if (this.supplier.lastYearSales) {
          this.supplier.lastYearSales = this.supplier.lastYearSales / 100
        }
        if (this.supplier.beforLastYearSales) {
          this.supplier.beforLastYearSales = this.supplier.beforLastYearSales / 100
        }
        if (this.supplier.thisYearSales) {
          this.supplier.thisYearSales = this.supplier.thisYearSales / 100
        }
        if (this.supplier.perCapitaSales) {
          console.log(90)
          this.supplier.perCapitaSales = this.supplier.perCapitaSales / 10000000
        }
        if (this.supplier.top3Buys) {
          this.supplier.top3Buys = this.supplier.top3Buys / 100
        }
        if (this.supplier.top2Buys) {
          this.supplier.top2Buys = this.supplier.top2Buys / 100
        }
        if (this.supplier.top1Buys) {
          this.supplier.top1Buys = this.supplier.top1Buys / 100
        }
      }
      this.formDate11 = ''
      this.getcompanyList()
      this.getfileOnSupplierFun(11)
      this.getfileOnSupplierFun(12)
      this.CategoryFun()
      this.getSupplierCategoryFun()
      this.categoryForm = Object.assign({}, categoryForm)
      //  if(row.companyId){
      this.formDate11 = row.establishmentTime
      this.checked = row.companyId.split(',')
      console.log(this.checked)
      //  }
      this.fileSupplider2 = ''
      this.fileSupplider1 = ''
      this.getNormalSupplierFun()
      this.activeName = 'first'

      this.$nextTick(() => {
        this.$refs.newSuplier.ProblemsState(row)

        this.$refs.oldSuplier.ProblemsState(row)
      })
    },
    handleDelete(row, $index) {
      this.$confirm('确认删除?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteInfo(row.id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          arraryRemove(this.tableData, row)
        })
        .catch(err => console.error(err))
    },
    confirm() {
      // console.log(this.checked)

      if (this.checked.length > 0) {
        this.supplier.companyId = this.checked.toString()
      }

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmFun()
        }
      })
    },

    async  confirmFun() {
      const isEdit = this.dialogType === 'edit'
      // console.log(obj)
      const obj = deepClone(this.supplier)
      // console.log(obj)
      // console.log(this.supplier.chaoemail, this.supplier.email)
      if (this.supplier.chaoemail && this.supplier.email.indexOf(',') == -1) {
        obj.email = this.supplier.email + ',' + this.supplier.chaoemail
      }

      if (isEdit) {
        var supplier = await update(this.supplier.id, obj)
      } else {
        var supplier = await add(obj)

        this.supplier.id = supplier.id
      }

      if (supplier.isSuccess) {
        this.$notify({
          title: 'Success',
          dangerouslyUseHTMLString: true,
          message: `
                <div>操作成功</div>
              `,
          type: 'success'
        })
        this.getInfo()
        this.dialogVisible = false
      } else {
        this.$notify({
          title: '提示',
          dangerouslyUseHTMLString: true,
          message: supplier.message,
          type: 'warning'
        })
      }
    }

  }
}
</script>
<style>
.downfile:hover {
  text-decoration: underline;
  color: blue;
}

.delbtn {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
</style>
